function setElementRotate(element, rotateX, rotateY, scale3d) {
  element.style.setProperty("--rotateX", rotateX + "deg");
  element.style.setProperty("--rotateY", rotateY + "deg");
  element.style.setProperty("--scale3d", scale3d);
}

function rotateElement(event, element) {
  const x = event.clientX;
  // clientX 鼠标指针相对于当前窗口的水平坐标
  // offsetX 鼠标指针相对于目标元素边缘位置的水平坐标
  // 如果元素不在窗口左上角，建议使用 offsetX
  // event.offsetX
  const y = event.clientY;
  // event.offsetY

  const middleX = element.clientWidth / 2;
  const middleY = element.clientHeight / 2;

  const offsetX = ((x - middleX) / middleX) * 10;
  const offsetY = ((y - middleY) / middleY) * 10;

  setElementRotate(element, offsetX, -1 * offsetY, 1.04);
}

const initRotate = (element) => {
  element.addEventListener("mouseenter", function (e) {
    rotateElement(e, element);
  });
  element.addEventListener("mousemove", function (e) {
    rotateElement(e, element);
  });
  element.addEventListener("mouseleave", function () {
    setElementRotate(element, 0, 0, 1);
  });
};

initRotate(document.querySelector(".card"));
